<template>
  <div class="tree-box">
    <!-- <el-tree
      :data="submenuList"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      @current-change="currentChange"
      @check-change="checkChange"
      @check="nodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => append(data)">
            Append
          </el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree> -->
    <!-- <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div> -->
    <el-menu router>
      <div v-for="(item, index) in submenuList" :key="index">
        <!-- 一级菜单（没有任何子级菜单）-->
        <el-menu-item :index="item.path" v-if="!item.chilren">
          <i :class="item.icon"></i>
          {{ item.title }}</el-menu-item
        >
        <!-- 一级菜单（有子级菜单）-->
        <el-submenu :index="item.path" v-else>
          <template slot="title"
            ><i :class="item.icon"></i>{{ item.title }}</template
          >

          <!-- 遍历二级菜单容器 -->
          <div v-for="(i, index) in item.chilren" :key="index">
            <!-- 判断二级菜单（没有三级菜单）-->
            <el-menu-item :index="i.path" v-if="!i.chilren"
              ><i :class="item.icon"></i>{{ i.title }}</el-menu-item
            >

            <!-- 判断二级菜单（有三级菜单）-->
            <el-submenu :index="i.path" v-if="i.chilren">
              <template slot="title"
                ><i :class="item.icon"></i>{{ i.title }}</template
              >
              <el-menu-item
                :index="j.path"
                v-for="(j, index) in i.chilren"
                :key="index"
                ><i :class="item.icon"></i>{{ j.title }}
              </el-menu-item>
            </el-submenu>
          </div>
        </el-submenu>
      </div>
    </el-menu>
    <!-- {{ this.arr }} <br />
    {{ this.arrOne }} -->
    <el-dialog title="权限列表" :visible.sync="dialogTableVisible">
      <el-form :rules="rules" ref="ruleForm" :model="form">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="路径" :label-width="formLabelWidth" prop="path">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图标" :label-width="formLabelWidth" prop="icon">
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="删除"
      :visible.sync="deleteLabel"
      width="30%"
      :close-on-click-modal="false"
    >
      <span>是否删除{{ title.title }}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteLabel = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// var arr = [
//   { id: 1, pid: 0, name: "中国" },
//   { id: 2, pid: 1, name: "湖北省" },
//   { id: 3, pid: 2, name: "武汉市" },
//   { id: 4, pid: 2, name: "恩施州" },
//   { id: 5, pid: 1, name: "四川省" },
//   { id: 6, pid: 0, name: "中国1" },
//   { id: 7, pid: 0, name: "中国12" },
//   { id: 8, pid: 0, name: "中国134" },
// ];

export default {
  data() {
    return {
      dialogTableVisible: false,
      form: { path: "", title: "", icon: "" },
      formLabelWidth: "120px",
      defaultProps: {
        children: "children",
        label: "title",
      },
      submenuList: [
        {
          id: 0,
          title: "tou",
          path: "tou",
          icon: "tou",
          children: [],
        },
      ],
      arrOne: [],
      treeList: [],
      rules: {
        path: [{ required: true, message: "请输入路径", trigger: "blur" }],
        icon: [{ required: true, message: "请输入图标", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      data: "",
      length: 0,
      arr: [],
      arr1: [],
      deleteLabel: false,
      title: "",
      delArr: [],
    };
  },
  methods: {
    getCheckedNodes() {
      // console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      // console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 4,
          label: "二级 2-1",
        },
        {
          id: 9,
          label: "三级 1-1-1",
        },
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    currentChange(a, b, c) {
      // console.log(a, b, c);
    },
    // checkChange(a, b, c) {
    //   console.log(a, b, c);
    // },
    nodeClick(a, b, c) {
      console.log(a, b, c);
    },
    append(data) {
      // console.log(data);
    },
    remove(node, data) {
      console.log(node, data);
      this.title = data;
      this.deleteLabel = true;
    },
    confirm() {
      this.del(this.submenuList);
      let index = this.delArr.findIndex((res) => {
        return res.id === this.title.id;
      });
      this.delArr.splice(index, 1);
      let arr = this.tree(this.delArr, 0);
      this.submenuList[0].children = arr;
      // this.$emit("submenuList", this.submenuList);
      this.deleteLabel = false;
    },
    one: function(arr) {
      arr.map((res, index) => {
        let obj = {
          id: res.id,
          pid: res.pid,
          title: res.title,
          path: res.path,
          icon: res.icon,
        };
        this.arrOne.push(obj);
        if (res.children) {
          this.one(res.children);
        }
      });
    },
    del: function(arr) {
      arr.map((res, index) => {
        let obj = {
          id: res.id,
          pid: res.pid,
          title: res.title,
          path: res.path,
          icon: res.icon,
        };
        this.delArr.push(obj);
        if (res.children) {
          this.del(res.children);
        }
      });
    },
    append(data) {
      console.log(data);
      this.data = data;
      this.dialogTableVisible = true;
    },
    tree: function(object, parent) {
      let treeList = [];
      object.map((res, index) => {
        if (res.pid === parent) {
          // 第一次循环表示有多少符合条件的一级
          let obj = res; // 拿到符合条件 对象
          let temp = this.tree(object, obj.id); // 拿到父级的id 递归 对比pid
          // 比如 拿到id为1 进入递归 对比 res.pid === 1 拿到结果
          if (temp.length > 0) {
            // 查询有结果 就 赋值
            this.$set(obj, "children", temp);
          }
          treeList.push(obj);
        }
      });
      return treeList;
    },
    submit() {
      let index;
      let list;
      if (this.arr.length > 0) {
        index = this.arr.findIndex((res) => {
          return res.id === this.data.id;
        });
        list = this.arr[index];
        console.log("index", index, "arr", this.arr);
      } else {
        index = this.arrOne.findIndex((res) => {
          return res.id === this.data.id;
        });
        list = this.arrOne[index];
        console.log("index", index, "arrOne", this.arrOne);
      }
      if (list.children) {
        console.log("a");
        this.length = this.length + 1;
        let obj = {
          id: this.length,
          pid: this.data.id,
          title: this.form.title,
          path: this.form.path,
          icon: "el-icon-user",
          children: [],
        };
        list.children.push(obj);
        this.arr1.push(obj);
        // console.log(list.menuList);
      } else {
        console.log("b");
        this.length = this.length + 1;
        let obj = {
          id: this.length,
          pid: this.data.id,
          title: this.form.title,
          path: this.form.path,
          icon: "el-icon-user",
          children: [],
        };
        this.$set(list, "children", [obj]);
        this.arr1.push(obj);
      }
      let arr = this.arrOne.concat(this.arr1);
      this.arr = arr;
      this.submenuList[0].children = this.tree(this.arr, 0);
      this.$emit("submenuList", this.submenuList);
      // let obj = {
      //   id: 0,
      //   title: "tou",
      //   path: "tou",
      //   icon: "tou",
      //   menuList: this.submenuList,
      // };
      // this.submenuList = obj;
      this.dialogTableVisible = false;
    },
  },
  created() {
    this.submenuList[0].children = [
      {
        id: 1,
        pid: 0,
        title: "概况",
        path: "/gaikuai",
        icon: "el-icon-user",
      },
      {
        id: 2,
        pid: 0,
        title: "商铺",
        path: "/shop",
        icon: "el-icon-user",
        children: [
          {
            id: 4,
            pid: 2,
            title: "商铺设置",
            path: "/shop/overview",
            icon: "el-icon-user",
            children: [
              {
                id: 5,
                pid: 4,
                title: "商铺分类",
                path: "/shop/type",
                icon: "el-icon-user",
              },
              {
                id: 6,
                pid: 4,
                title: "商铺采集",
                path: "/shop/caiji",
                icon: "el-icon-user",
              },
            ],
          },
          {
            id: 7,
            pid: 2,
            title: "标签设置",
            path: "/shop/labels",
            icon: "el-icon-user",
          },
        ],
      },
      {
        id: 3,
        pid: 0,
        title: "订单",
        path: "/order",
        icon: "el-icon-user",
        children: [
          {
            id: 8,
            pid: 3,
            title: "订单设置",
            path: "/order/setting",
            icon: "el-icon-user",
          },
          {
            id: 9,
            title: "列表",
            pid: 3,
            path: "/order/group",
            icon: "el-icon-user",
            children: [
              {
                pid: 9,
                id: 10,
                title: "团购分类",
                path: "/order/group/type",
                icon: "el-icon-user",
              },
              {
                id: 11,
                pid: 9,
                title: "团购采集",
                path: "/order/group/caiji",
                icon: "el-icon-user",
              },
            ],
          },
        ],
      },
    ];
    this.one(this.submenuList);
    this.length = this.arrOne.length;
    this.$emit("submenuList", this.submenuList);
  },
};
</script>

<style></style>
